<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Animation</title>
	</head>
	<style type="text/css">
		 .test3{
		 	width: 100px;
		 	height: 100px;
		 	background: deepskyblue;
		 	border: 4px solid orange;
		 	animation-name:trans ;
		 	animation-duration: 4s;
		 	animation-fill-mode: both;
		 	animation: trans 10s linear infinite 300ms alternate backwards;
		 }
		 @keyframes trans{
		 	0%{
		 		opacity: 0;
		 		transform: scale(2);
		 	}
		 	20%{
		 		transform: rotateZ(-50deg) rotateY(-180deg);
		 	}
		 	
		 	40%{
		 		transform: skew(50deg);
		 		transform: translate(50px,60px);
		 	}
		 	
		 	100%{
		 		opacity: 1;
		 		transform: scale(.5);
		 	}
		 }
	</style>
	<body>
		<div class="test3"></div>
	</body>
</html>
